{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/address_add.css">
<body>
<div class="build-navbar" data-title="{if isset($info)}修改地址{else}添加地址{/if}"></div>

<div class="main">
    <form class="layui-form" action="{:url('address/save')}" lay-filter="lay-form">
        <input type="hidden" name="id" value="{$info.id??''}"/>
        <input type="hidden" name="type" value="{$Request.param.type??''}"/>
        <div class="domain">
            <div class="layout">
                <div class="title">收货人</div>
                <div class="content">
                    <input type="text" name="nickname" placeholder="请填写收货人姓名" autocomplete="off"
                           lay-verify="required"
                           lay-reqtext="请填写收货人姓名" lay-verType="tips" value="{$info.nickname??''}"/>
                </div>
            </div>
            <div class="layout">
                <div class="title">手机号</div>
                <div class="content">
                    <input type="text" name="tel" placeholder="请填写收货人手机号" autocomplete="off"
                           lay-verify="required"
                           lay-reqtext="请填写收货人手机号" lay-verType="tips" value="{$info.tel??''}"/>
                </div>
            </div>
            <div class="layout">
                <div class="title">所在地区</div>
                <div class="content">
                    <input lay-on="chooseAddress" type="text" placeholder="省、市、区、街道" autocomplete="off"
                           readonly lay-verify="required"
                           lay-reqtext="请选择省、市、区、街道" lay-verType="tips" value="{if !empty($info)}{$info.p.title}-{$info.c.title}-{$info.d.title}-{$info.t.title}{/if}"/>
                    <input type="hidden" name="area" value="{if !empty($info)}{$info.province},{$info.city},{$info.district},{$info.town}{/if}" class="value"/>
                </div>
            </div>
            <div class="layout layout-textarea">
                <div class="title">详细地址</div>
                <div class="content">
                    <textarea name="details" placeholder="小区、门牌号" autocomplete="off" lay-verify="required"
                              lay-reqtext="请填写详细地址" lay-verType="tips">{$info.details??''}</textarea>
                </div>
            </div>

            <div class="layout layout-sp">
                <div class="title">设为默认地址</div>
                <div class="content">
                    <input type="checkbox" name="default" lay-skin="switch" value="1" {if isset($info) && $info.default == 1}checked{/if}>
                </div>
            </div>
        </div>
        <div class="btn theme-btn fixed-b" lay-event="formSubmit">确认</div>
    </form>

</div>


<div class="address-picker"></div>

</body>
{include file="public/footer"/}
<script>
    layui.extend({pickerPower: "{/}/static/index/js/core/pickerPower"}).use(['pickerPower', 'listen'], function (d) {
        var pickerPower = layui.pickerPower, u = layui.util, a = layui.jquery;
        u.on({
            'chooseAddress': function () {
                var that = a(this), title, ids, value = [];
                //读取默认值
                if (that.val()) {
                    title = that.val().split('-');
                    ids = that.next().val().split(',');
                    title.map((v, i) => {
                        value.push({id: ids[i], value: v})
                    })
                }

                //渲染picker选择器
                pickerPower.render({
                    elem: 'address-picker',
                    url: '{:url("address/getArea")}',
                    title: '请选择地址',
                    deep: 4,
                    value: value
                }, function (data) {
                    that.val(data.map((v) => (v = v.value)).join("-"));
                    that.next().val(data.map((v) => (v = v.id)).join(","));
                });
            }
        })

    });
</script>
</html>